<template>
    <div class="flex flexbox flexcolumn vd_info_right">
        <div class="vd_head flexbox flexcenter">
            <div>
                <div class="vd_name">{{countData.material_name}}</div>
                <div class="vd_id"><span class="vd_mg">ID：{{countData.material_id}}</span> <span class="vd_mg">序列:{{countData.index+1}}/{{countData.count}}</span></div>
            </div>
            <div class="count-xh flexbox flexcenter">
                <div class="count-xh-num">{{countData.stat_cost?countData.stat_cost:"0"}}</div>
                <img src="@/assets/img/vd_iocn01.png" alt="" class="count-xh-icon">
            </div>
        </div>
        <div class="vd-rank-box flex flexbox flexcolumn">
            <div class="vd-rank-head flexbox flexcenter">
                <div class="w1 wd-com">排名</div>
                <div class="w2 wd-com flex">视频名称</div>
                <div class="w3 wd-com">编导</div>
                <div class="w4 wd-com">拍摄</div>
                <div class="w5 wd-com">剪辑</div>
                <div class="w6 wd-com">消耗</div>
            </div>
            <div class="vd-rank-content flex">
                <div class="flexbox flexcenter vd-rank-item" v-for="(item,index) in list" :key="item.id">
                    <div class="w1 wd-com">{{index+1}}</div>
                    <div class="w2 wd-com flex">{{item.material_name}}</div>
                    <div class="w3 wd-com">{{item.director_name}}</div>
                    <div class="w4 wd-com">{{item.photographer_name}}</div>
                    <div class="w5 wd-com">{{item.editor_name}}</div>
                    <div class="w6 wd-com">{{item.stat_cost}}</div>
                </div>
            </div>
        </div>
        <!-- <div class="flex vd_content">
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg01">
                    <img src="@/assets/img/vd_iocn01.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">消耗</div>
                        <div class="vd_number">{{countData.stat_cost?countData.stat_cost:"0"}}</div>
                    </div>
                </div>
            </div>
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg02">
                    <img src="@/assets/img/vd_iocn02.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">GMV</div>
                        <div class="vd_number">{{countData.pay_order_amount?countData.pay_order_amount:"0"}}</div>
                    </div>
                </div>
            </div>
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg03">
                    <img src="@/assets/img/vd_iocn03.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">支付ROI</div>
                        <div class="vd_number">{{countData.pay_order_roi?countData.pay_order_roi:"0"}}</div>
                    </div>
                </div>
            </div>
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg04">
                    <img src="@/assets/img/vd_iocn04.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">转化成本</div>
                        <div class="vd_number">{{countData.convert_cost?countData.convert_cost:"0"}}</div>
                    </div>
                </div>
            </div>
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg05">
                    <img src="@/assets/img/vd_iocn05.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">展示数</div>
                        <div class="vd_number">{{countData.show_cnt?countData.show_cnt:"0"}}</div>
                    </div>
                </div>
            </div>
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg06">
                    <img src="@/assets/img/vd_iocn06.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">点击数</div>
                        <div class="vd_number">{{countData.click_cnt?countData.click_cnt:"0"}}</div>
                    </div>
                </div>
            </div>
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg07">
                    <img src="@/assets/img/vd_iocn07.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">转化数</div>
                        <div class="vd_number">{{countData.convert_cnt?countData.convert_cnt:"0"}}</div>
                    </div>
                </div>
            </div>
            <div class="vd_data">
                <div class="vd_main flexbox flexcenter vm_bg08">
                    <img src="@/assets/img/vd_iocn08.png" alt="" class="vd_icon">
                    <div class="vd_count">
                        <div class="vd_title">创建计划数</div>
                        <div class="vd_number">{{countData.ad_id_count?countData.ad_id_count:"0"}}</div>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
export default {
    props: ["countData","list"],
    components: {},
    name: "",
    data() {
        return {};
    },
    created() {},
    mounted() {},
    watch: {},
    beforeDestroy() {},
    methods: {},
};
</script>


<style scoped>
.vd_info_right {
    background: url(../../../assets/img/data_bg.png) no-repeat center;
    background-size: cover;
    margin-left: 0.17rem;
    border-radius: 20px;
    overflow: hidden;
}
.vd_head {
    padding: 0.2rem 0.4rem;
    border-radius: 32px;
    border: 1px solid #454f63;
    background: rgba(185, 179, 255, 0.1);
    box-shadow: 0px 5px 5px 0px rgba(20, 21, 22, 0.8);
    margin: 0.2rem 0.2rem 0;
}
.vd_name {
    font-size: 0.2rem;
    height: 0.27rem;
    line-height: 0.27rem;
    color: #fff;
}
.vd_id {
    font-size: 0.18rem;
    height: 0.25rem;
    line-height: 0.25rem;
    color: #fff;
    opacity: 0.5;
    margin-top: 0.1rem;
}
.vd_content {
    overflow: hidden;
    padding: 0.1rem;
}
.vd_data {
    float: left;
    width: 50%;
    height: 25%;
    box-sizing: border-box;
    padding: 0.1rem;
}
.vd_main {
    border-radius: 32px;
    height: 100%;
    padding: 0 0.4rem;
    overflow: hidden;
}
.vd_icon {
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 50%;
}
.vd_count {
    margin-left: 0.2rem;
}
.vd_title {
    font-size: 0.2rem;
    color: #fff;
    opacity: 0.5;
    line-height: 0.33rem;
}
.vd_number {
    font-size: 0.4rem;
    color: #fff;
    line-height: 0.52rem;
    height: 0.52rem;
    margin-top: 0.16rem;
    font-family: D-DIN;
    font-weight: 700;
}
.vd_mg {
    margin-right: 0.24rem;
}
.vm_bg01 {
    background: url(../../../assets/img/df_bg01.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.vm_bg02 {
    background: url(../../../assets/img/df_bg02.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.vm_bg03 {
    background: url(../../../assets/img/df_bg03.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.vm_bg04 {
    background: url(../../../assets/img/df_bg04.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.vm_bg05 {
    background: url(../../../assets/img/df_bg05.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.vm_bg06 {
    background: url(../../../assets/img/df_bg06.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.vm_bg07 {
    background: url(../../../assets/img/df_bg07.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.vm_bg08 {
    background: url(../../../assets/img/df_bg08.png) no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

.count-xh {
    margin-left: auto;
}
.count-xh-num {
    font-size: 0.4rem;
    color: #fff;
    line-height: 0.52rem;
    height: 0.52rem;
    font-family: D-DIN;
    font-weight: 700;
}
.count-xh-icon {
    width: 0.48rem;
    height: 0.48rem;
    margin-left: 0.12rem;
}
.vd-rank-box {
    box-sizing: border-box;
    margin: 0.2rem;
    padding: 0.4rem;
    border-radius: 0.4rem;
    border: 1px solid #6e7a92;
    background: linear-gradient(
        180deg,
        rgba(40, 46, 62, 0.8) 0%,
        rgba(26, 31, 56, 0.4) 46.25%
    );
    box-shadow: 0px 5px 5px 0px rgba(20, 21, 22, 0.8);
}
.vd-rank-head {
    height: 0.67rem;
    font-size: 0.2rem;
    color: #fff;
    border-radius: 0.2rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0 0.2rem;
}
.vd-rank-item{
    font-size: 0.2rem;
    color: #fff;
    height: 20%;
    box-sizing: border-box;
    padding: 0.2rem;
}
.wd-com{
    padding: 0 0.2rem;
}
.w1{
    width: 0.5rem;
    flex-shrink: 0;
}
.w3{
    width: 0.8rem;
    flex-shrink: 0;
}
.w4{
    width: 0.8rem;
    flex-shrink: 0;
}
.w5{
    width: 0.8rem;
    flex-shrink: 0;
}
.w6{
    width: 1.5rem;
    flex-shrink: 0;
}
</style>


